<template>
<div class="w-full h-full">
  <div class="flex justify-center">
    <div class="max-w-2xl bg-white border border-gray-200 rounded-lg shadow mt-10">
      <a>
        <img class="rounded-t-lg" src="../assets/img.png" alt="" />
      </a>
      <div class="p-5">
        <a>
          <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 ">
            今日打卡
          </h5>
        </a>
        <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
          成功的秘诀在于坚持自己的想法，而不是坚持别人的意见。" – 约翰·D·洛克菲勒
        </p>
        <a @click="isShow=true" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300">
          点我打卡
          <svg class="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
          </svg>
        </a>
<!--        点击【点我打卡】出现的div-->
        <div v-show="isShow"   v-loading="loading">
          <el-divider/>
<!--          下拉框-->
          <div class="mb-6" >
            <label for="name" class="block mb-2 text-sm font-medium text-gray-900">打卡人</label>
            <input v-model="name" type="text" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 " required>
          </div>
          <div class="mb-6">
            <label for="taskName" class="block mb-2 text-sm font-medium text-gray-900">打卡任务名称</label>
            <input v-model="taskName" type="text" id="taskName" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 " placeholder="每天做10个高数题" required>
          </div>
          <div v-show="!isUploadImg" class="flex items-center justify-center w-full">
            <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
              <div class="flex flex-col items-center justify-center pt-5 pb-6">
                <svg class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
                </svg>
                <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">点击我上传打卡图片</span></p>
                <p class="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
              </div>
              <input id="dropzone-file" type="file" class="hidden" @change="handleFileChange"/>
            </label>
          </div>
          <div v-show="isUploadImg">
            <span class="text-sm font-medium text-gray-900">
              打卡图片：
            </span>
            <img class="h-auto max-w-xs rounded-lg" :src="imgUrl">
          </div>
          <div class="mt-7">
            <a @click="submit" type="submit" class="mt-5 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" style="cursor:pointer;">
              提交
            </a>
          </div>
        </div>
      </div>
    </div>

  </div>

</div>
</template>

<script>

import {API} from '../utils/API.js'
import {ElMessage} from "element-plus";

export default {
  name: 'MainView',
  components: {

  },
  data() {
    return {
      name: '',
      taskName: '',
      selectedFile: null,
      imgUrl: '',
      isUploadImg: false,
      dropDownVis: false,
      isShow: false,
      loading: false,
    }
  },
  methods: {
    submit() {
      if (!this.imgUrl) {
        this.myElMessage("请上传打卡图片", 'warning')
        return;
      }
      if (!this.name) {
        this.myElMessage("请输入打卡人姓名", 'warning')
        return;
      }
      if (!this.taskName) {
        this.myElMessage("请输入打卡任务名称", 'warning')
        return;
      }
      const taskRecord = {
        "userName": this.name,
        "taskName": this.taskName,
        "imgUrl": this.imgUrl
      };
      API.post('/task_record/insert' , taskRecord)
          .then(res => {
            if (res.data && res.data.data.msg) {
              this.myElMessage('打卡成功！', 'success');
              this.initData();
            }
          })
    },
    myElMessage(msg, type) {
      ElMessage({
        message: msg,
        type: type
      })
    },
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
      this.uploadImage();
    },
    async uploadImage() {
      if (this.selectedFile) {
        this.loading = true;
        const formData = new FormData();
        formData.append("file", this.selectedFile);
        try {
          const response = await API.post("/file/upload", formData, {
            headers: {
              "Content-Type": "multipart/form-data",
            },
          });
          // 根据后端返回的数据进行处理
          const data = response.data;
          if (data.data && data.data.path) {
            this.imgUrl = data.data.path;
            this.isUploadImg = true;
          }
          ElMessage({
            message: '图片上传成功',
            type: 'success'
          })
        } catch (error) {
          // 处理上传失败情况
          this.selectedFile = null;
          console.error(error);
        }
        this.loading = false;
      }
    },
    initData() {
      this.name = ''
      this.taskName = ''
      this.selectedFile = null
      this.imgUrl = ''
      this.isUploadImg = false
      this.dropDownVis = false
      this.isShow = false
    }
  },
  beforeMount() {

  },
  mounted() {

  },
  beforeUnmount() {

  }
}
</script>

<style scoped>

</style>